<template>
  <el-aside class="chart-side-bar">
    <el-scrollbar class="scroll-bar">
      <draggable item-key="name" v-model="tabList" @end="addHandler">
        <template #item="{ element }">
          <ChartItem :info="element" />
        </template>
      </draggable>
    </el-scrollbar>
  </el-aside>
</template>

<script setup lang="ts">
import draggable from "vuedraggable";
import ChartItem from "./ChartItem.vue";
import packageConfig from "./../config";
import { useCanvasStore } from "@/store/canvas";
const tabList = ref([...packageConfig]);
console.log(tabList);
const store = useCanvasStore();
const { x, y } = useMouse();
const addHandler = (val: any) => {
  console.log(val);
  console.log(val.originalEvent);
  let model = {
    x: x.value - 340,
    y: y.value - 150,
  };
  // console.log({ ...toRaw(val.item._underlying_vm_), ...model });
  if (x.value > 340 && y.value - 150) {
    store.addComponentList({ ...toRaw(val.item._underlying_vm_), ...model });
  }
};
</script>

<style scoped lang="scss">
.chart-side-bar {
  width: 180px;
  background: #fefefe;
  height: calc(100vh - 60px);
  overflow: hidden;
  .scroll-bar {
    padding: 0 8px;
    box-sizing: border-box;
  }
}
</style>
